<template>
  <div>
    <h1>Home</h1>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods: {
    toNews() {
      // 借助 router 的实例方法，通过编写代码来实现路由跳转，被称作为编程式路由导航
      // 我们在入口文件中已经向所有的组件都注入了$route 和 $router两个对象
      // $route路由对象代表当前路由的信息
      // $router路由器对象提供了整个路由之间的操作的属性和方法
      // console.log(this);
      // 编程式路由导航主要由以下5个方法  push replace go back forward
      // push 和 replace 的参数有两种 ：1.字符串参数 2,。对象类型参数
      // push 方法的字符串类型对象，只需要书写完整的路由地址即可
      this.$router.push('/home/news');
    },
    toMusic() {
      // push方法的对象类型参数，对象中书写path属性代表完整地址
      this.$router.push({
        path: '/home/music',
      });
    },
    toGame() {
      // push 方法的对象类型参数，对象中书写name属性代表某个路由的名字
      this.$router.push({
        name: 'Game',
      });
    },
  },
};
</script>
<style></style>
